﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


    <head>
        <meta charset="utf-8">
        <title>-绿色生活-自然与环境</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="Greenlife - Nature & Environmental Non-Profit HTML5 Template">
        <meta name="author" content="BlueWindLab">
        <link rel="shortcut icon" href="images/favicon.png" />

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!-- The styles -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link href="css/bootstrap-social.css" rel="stylesheet" type="text/css" >
        <link href="css/icon-styles.css" rel="stylesheet" type="text/css" >
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" >
        <link href="css/animate.css" rel="stylesheet" type="text/css" >
        <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" >
        <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" >
        <link href="css/venobox.css" rel="stylesheet" type="text/css" >
        <link rel="stylesheet" href="css/styles.css" />

    <body> 

        <div id="preloader">
            <span class="margin-bottom"><img src="images/loader.gif" alt="loader icon" /></span>
        </div>

        <!--  HEADER -->

        <header class="main-header clearfix">

            <div class="top-bar">

                <div class="container">

                    <div class="row clearfix">

                        <div class="col-md-6 col-sm-12">

                            <span class="top-phone-no">
                                <i class="fa fa-phone-square"></i> 
                                +093-120-525-9162
                            </span>

                            <span class="top-email-info">
                                <i class="fa fa-paper-plane"></i>
                                <a href="#">info@example.com</a>
                            </span>

                        </div> 

                        <div class="col-md-6 col-sm-12 text-right hidden-xs top-donation-btn-container">

                            <a href="join.jsp" title="Donate Now" class="btn top-donate-btn" >加入我们</a>
                            <a href="JuanServlet" title="Donate Now" class="btn top-donate-btn" >捐赠</a>

                        </div> 

                    </div> 

                </div> 

            </div> 
            
            <section class="header-wrapper navgiation-wrapper">
            
                <div class="navbar navbar-default">         
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="logo" href="IndexsServlet"><img alt="" src="images/logo.png"></a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="drop">
                                    <a href="indexs.jsp" title="Home Layout 01">首页</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                                <li class="drop"><a href="GreenInformationServlet">页面</a>
                                    <ul class="drop-down">
                                        <li><a href="GreenInformationServlet" title="About Us">关于我们</a></li>
                                        <li class="drop"><a href=""galleryServlet">陈列室</a>
                                        </li>
                                        <li><a href="donation.jsp" title="Donation">捐赠物</a></li> 
                                        </li>
                                    </ul>
                                </li>
                                
                                <li>
                                    <a href="YuanServlet">原因</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                                
                                <li>
                                    <a href="ShiServlet">事件</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                               
                            </ul>
                        </div>
                    </div>
                </div>
                
            </section>

        </header> <!-- end main-header  -->

        <section class="page-header" data-stellar-background-ratio="0.1">

            <div class="container">

                <div class="row">

                    <div class="col-sm-12 text-center">


                        <h3>
                          原因详细
                        </h3>

                        <p class="page-breadcrumb">
                            <a href="IndexsServlet">主页</a> / <a href="#">原因</a> / 原因详细
                        </p>


                    </div>

                </div> <!-- end .row  -->

            </div> <!-- end .container  -->

        </section> <!-- end .page-header  -->

        <section class="section-content-block">

            <div class="container">

                    <div class="row">

                        <div class="col-sm-12">

                            <article class="post single-post-inner">

                                <div class="post-inner-featured-content">
                                    <img alt="" src="${requestScope.Reason[0].img }">
                                 </div>
                                
                                
                                <div class="cause-info-container">
                                    <div class="row">
                                        <div class="col-md-3 col-sm-12 text-center causes-info-block"> 
                                            <i class="fa fa-road donate-font-size"></i> 
                                            <br> <strong>目标:</strong>$ ${requestScope.Reason[0].targets }
                                        </div>
                                        <div class="col-md-3 col-sm-12 text-center causes-info-block"> 
                                            <i class="fa fa-heart  donate-font-size"></i> <br> 
                                            <strong>募捐到:</strong>$ ${requestScope.Reason[0].collect }
                                        </div>
                                        <div class="col-md-3 col-sm-12 text-center causes-info-block">
                                            <i class="fa fa-line-chart  donate-font-size"></i> <br> 
                                            <strong>进程:</strong> ${requestScope.Reason[0].collect / requestScope.Reason[0].targets * 100} % 
                                        </div>
                                        <div class="col-md-3 col-sm-12 text-center causes-info-block"> 
                                            <a class="btn btn-success btn-sm btn-donate" href="JuanServlet"> 立即捐款 !</a>
                                        </div>
                                    </div>                
                                </div>

                                <div class="single-post-inner-title">
                                     <h2>${requestScope.Reason[0].theme }</h2>
                                     <p class="single-post-meta"><i class="fa fa-user"></i>&nbsp; ${requestScope.Reason[0].author }</p>
                                 </div>

                                <div class="single-post-inner-content">
												<p>${requestScope.ReasonTa[0].donationsContent }</p>
                                 </div>

                                <div class="single-post-inner-meta">
                                     <div class="tag-list">
                                         <a href="">${requestScope.Reason[0].title }</a>
                                     </div>
                                 </div>


                            </article> <!--  end single-post-container -->

                            <div class="article-author clearfix">

                                <div class="topic-bold-header clearfix">
                                    <h4>原因创建者 <a href="">${requestScope.Reason[0].author }</a></h4>
                                </div> <!-- end .topic-bold-header  -->

                                <figure class="author-avatar">
                                    <a href="">
                                        <img src="${requestScope.ReasonTa[0].img }" alt="Avatar">
                                    </a>
                                </figure>

                                <div class="about_author">
                                    ${requestScope.ReasonTa[0].donationsContents }
                                </div>

                                <div class="social-icons margin-top-11 clearfix">
                                    <a class="fa fa-facebook social_icons" href="#" data-original-title="Facebook"></a>
                                    <a class="fa fa-twitter social_icons" href="https://twitter.com/#" data-original-title="Twitter"></a>
                                    <a class="fa fa-flickr social_icons" href="http://www.flickr.com/photos/#" data-original-title="Flickr"></a>
                                    <a class="fa fa-youtube social_icons" href="http://www.youtube.com/#" data-original-title="Youtube"></a>
                                    <a class="fa fa-linkedin social_icons" href="#" data-original-title="Linkedin"></a>
                                </div>

                            </div> <!-- end .article-author  -->

                            <div class="post-nav-section clearfix">

                                <a class="btn btn-primary fr" href="#">下一个原因 <i class="fa fa-angle-double-right"></i></a>
                                <a class="btn btn-primary" href="#"><i class="fa fa-angle-double-left"></i> 先前原因</a>

                            </div> <!-- end .post-nav-section  -->

                            

                            

                        </div> <!--  end .single-post-container -->

                    </div> <!--  end row  -->

            </div> <!--  end container -->

        </section> <!-- end .section-content-block  -->   
       
        
    
        
       <!-- FOOTER  -->
        
       <footer>
        <!-- FOOTER WIDGET AREA -->

            <section class="section-content-block footer-widget-area-bg">
                <div class="container">
                    <div class="row">
                        
                        <div class="col-md-4 col-sm-12">
                            <div class="footer-widget-area">
                                <h3>关于我们</h3>
                                <div class="contact-info divider-line">
                                <p>走进明日，从今天开始。共建绿色家园，迈向可持续未来！</p>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-heading">跟随我们:</div>
                                    <div class="contact-details">
                                        <div class="social-icons">
                                            <a href="#">
                                            <i class="fa fa-facebook"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-twitter"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-pinterest-p"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-instagram"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-linkedin"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end .col-md-4  -->

                        

                        <div class="col-md-4 col-sm-4">
                            <div class="footer-widget-area">
                                <h3>联系我们</h3>
                                <div class="contact-info divider-line">
                                    <div class="contact-heading">地址:</div>
                                    <div class="contact-details">
                                    中国四川省
                                    <br>
                                    成都信息工程大学
                                    </div>
                                </div>
                                <div class="contact-info divider-line">
                                    <div class="contact-heading">电话:</div>
                                    <div class="contact-details">
                                    (+1)755-650-5212 - office
                                    </div>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-heading">邮箱:</div>
                                    <div class="contact-details color-primary">
                                        <a href="mailto:admin@bluewindlb.net">info@bluewindlab.net</a>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end .col-md-4  --> 
                    </div> <!-- end .row  --> 
                </div> <!-- end .container  -->
            </section> <!--  end .footer-widget-area-bg -->

            <!--FOOTER CONTENT  -->

            <section class="footer-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                             <span>
                            Copyright © 2016. 保留所有权利
                            <a class="color-primary" href="http://www.bootstrapmb.com/">bluewindlab.net</a>
                            </span>
                        </div> <!-- end .col-md-6  --> 
                        <div class="col-md-6 col-sm-12">
                            <div class="footer-nav">
                                <nav>
                                    <ul>
                                        <li>
                                           <a href="index.html">主页</a>
                                        </li>
                                        <li>
                                          <a href="#">原因</a>
                                        </li>
                                        <li>
                                          <a href="donate.html">事件</a>
                                        </li>
                                        <li>
                                          <a href="blog-with-sidebar.html">陈列室</a>
                                        </li>
                                        <li>
                                          <a href="campaign-grid.html">博客</a>
                                        </li>
                                        <li>
                                          <a href="contact.html">联系</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div> <!-- end .col-md-6  --> 
                    </div> <!-- end .row  --> 
                </div> <!-- end .container  --> 
            </section>  <!--  end .footer-area -->
            
        </footer> <!--  end of footer -->

        <!-- Back To Top Button  -->

        <a id="backTop">返回顶部</a>
       
        <script src="js/jquery.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/wow.min.js"></script>
       <script src="js/jquery.backTop.min.js "></script>
       <script src="js/waypoints.min.js"></script>
       <script src="js/waypoints-sticky.min.js"></script>
       <script src="js/owl.carousel.min.js"></script>
       <script src="js/jquery.stellar.min.js"></script>
       <script src="js/jquery.counterup.min.js"></script>
       <script src="js/venobox.min.js"></script>
       <script src="js/custom-scripts.js"></script>
       
   </body>

</html>